<template>
  <div class="searchPages">
    <div class="closeContent">
      <div class="searchAi">
        <el-input
          v-model="searchData"
          placeholder="What are you searching for?"
        >
          <el-button
            @click="handleClickSearch()"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </div>
      <div class="iconContent">
        <i class="el-icon-close iconClose" @click="closePage()"></i>
      </div>
    </div>
    <div class="line"></div>
    <div class="searchPagesContent">
      <!-- <div class="contentBox">
        <div class="contentChild askAi">
          <div class="imgAi"><img src="../../../assets/Ai.png" alt="" /></div>
          <div class="wordAi">Ask Ai</div>
        </div>
        <div class="contentChild suggestWord">Suggest</div>
        <div
          class="contentChild"
          v-for="(item, index) in suggestList"
          :key="index"
          @click="handleChoose(item)"
        >
          {{ item.content }}
        </div>
      </div> -->
      <div class="contentBox"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: "",
      suggestList: [
        {
          content: "如何提高自己的情商",
        },
        {
          content: "芋泥啵啵奶茶怎么做",
        },
        {
          content: "今天的天气预报",
        },
        {
          content:
            "在太空中，一个水球被刀从中间砍一下，会变成两个水球还是会爆开？",
        },
        {
          content: "蝗虫黑压压飞过来时，为什么它们能够不撞到其他蝗虫？",
        },{
          content:
            "为什么手被火烧到时，人会先下意识缩回手，然后才感到疼痛？",
        },
        {
          content: "我们对生活应该掌握的辩证态度是?",
        },
        {
          content:"What are your most important relationships and how do they contribute to your sense of purpose or meaning?"
        },
        {
          content:"Do you believe in God or a higher power, and if so, how does this belief inform your sense of purpose or meaning?"
        },
        {
          content:"When you close your eyes what do you dream of?"
        },
        {
          content:"If you had 24 hours to live,who whould you be with 23 hours from now?"
        }
      ],
    };
  },
  methods: {
    closePage() {
      this.$emit("child-method");
    },
    handleClickSearch() {
      console.log(this.searchData);
    },
    handleChoose(e){
      console.log(e)
    }
  },
};
</script>
<style scoped>
.searchPages {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
  background: #d8d8d8;
}
.closeContent {
  width: 100%;
  height: 5vh;
  display: flex;
  justify-content: space-between;
}
.iconContent {
  width: 5vh;
  height: 5vh;
}
.iconClose {
  font-size: 5vh;
}
.iconClose:hover {
  cursor: pointer;
}
.searchPagesContent {
  width: 100%;
  height: calc(100% - 5vh);
}
.line {
  width: 97%;
  height: 0;
  border: 1px solid #e4e2e2;
  margin-top: 1vh;
  margin: 0 auto;
}
.searchAi {
  width: calc(100% - 5vh);
  height: 100%;
}
.contentBox {
  width: calc(100% - 6vw);
  height: calc(100% - 4vh);
  padding: 2vh 3vw;
  overflow: auto;
}
.contentChild {
  height: auto;
  text-align: start;
  padding-left: 1vw;
  border-radius: 10px;
  font-size: 1em;
  color: #959595;
  word-wrap: break-word;
  padding: 1vh 1vw;
}
.contentChild:hover {
  background: #f2f2f2;
  cursor: pointer;
}
.askAi {
  display: flex;
  align-items: center;
}

.imgAi {
  width: 3vh;
  height: 3vh;
  > img {
    width: 100%;
    height: 100%;
  }
}
.wordAi{
  margin-left: 1vw;
  padding-top: 0.5vh;
}
.suggestWord:hover{
  cursor: auto;
  background: transparent;
}
/deep/ .el-input--small {
  height: 100%;
}
/deep/ .el-input--small .el-input__inner {
  height: 100%;
  border: none;
  line-height: 100%;
  font-size: 1.3em;
}
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #fff;
  border: none;
}
/deep/ .el-icon-search {
  font-size: 1.2em;
}
</style>